<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../images/logo.ico">
    <link rel="stylesheet" href="../plugin/bootstrap/css/bootstrap.min.css">
    <script src="../plugin/bootstrap/js/bootstrap.min.js"></script>
    <script src="../plugin/jQuery/jquery-3.6.0.js"></script>
    <link rel="stylesheet" href="../css/personal.css">
    <script src="../plugin/jQuery/jquery-3.6.0.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugin/element-ui/index.css" />
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/page.css" />
    <title>个人中心</title>
</head>

<body>
    <!-- 顶栏 -->
    <header>
        <div id="header" class="row w justify-content-around">
            <!-- logo图 -->
            <div class="header_logo col-1">
                <img src="../images/logo_maple2.png" alt="...">
                <div class="header_logo_text">
                    Maple Leaf
                </div>
            </div>
            <!-- 搜索框 -->
            <div class="header_search col-7">
                <input type="text">
                <button>搜索</button>
            </div>
            <!-- 购物车 -->
            <div class="col-2 header_shoppingCart">
                <a href="./shoppingCart.html">
                    <img src="../images/购物车_shopping.png" alt="">
                    我的购物车
                </a>
            </div>
            <div class="col-2 header_shoppingCart">
                <a href="./order.html">
                    <img src="../images/_订单.png" alt="">
                    我的订单
                </a>
            </div>
        </div>
    </header>

    <!-- 导航栏 -->
    <nav class="classify">
        <div class="row w m-0 mx-auto">
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link" href="../index.html">首页</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- 主体部分 -->
    <main id="food-add-app">
        <div id="main">
            <h2>个人信息</h2>
            <form action="">
                <div class="input-group align-items-center">
                    用户名称：&nbsp;&nbsp;<input class="form-control m-0" type="text" placeholder="用户名称" name="name" v-model="user.name">
                </div>
                <div class="input-group align-items-center">
                    手机号码：&nbsp;&nbsp;<input class="form-control m-0" type="text" placeholder="手机号码" name="phone"
                        v-model="user.phone">
                </div>
                <div class="input-group align-items-center">
                    用户旧密码：&nbsp;<input class="form-control m-0" type="password" placeholder="用户旧密码" name="password"
                        v-model="user.oidPwd">
                </div>
                <div class="input-group align-items-center">
                    用户新密码：&nbsp;<input class="form-control m-0" type="password" placeholder="用户新密码" name="password"
                        v-model="user.newPwd">
                </div>
                <div class="input-group align-items-center">
                    用户性别：&nbsp;&nbsp;
                    <div class="form-check form-check-inline d-flex align-items-center m-0">
                        <input class="form-check-input" type="radio" name="sex" id="man" value="1" v-model="user.sex">
                        <label class="form-check-label" for="inlineRadio1">
                            男
                        </label>
                    </div>
                    <div class="form-check form-check-inline d-flex align-items-center m-0">
                        <input class="form-check-input" type="radio" name="sex" id="lady" value="0" v-model="user.sex">
                        <label class="form-check-label" for="inlineRadio2">
                            女
                        </label>
                    </div>
                </div>

                <div class="head_portrait">
                    <p>用户头像：</p>
                    <div class="addBrand-container m-0">
                        <div class="container p-0">
                            <el-upload class="avatar-uploader row px-3" action="/common/upload" :show-file-list="false"
                                :on-success="handleAvatarSuccess" :before-upload="beforeUpload" ref="upload">
                                <img v-if="image" :src="image" class="avatar"></img>
                                <i v-else class="el-icon-plus avatar-uploader-icon col"></i>
                            </el-upload>
                        </div>
                    </div>
                    <button @click="edit" type="button" class="btn btn-light border border-2 py-2 px-4 my-4 mb-5">提交</button>
                </div>
                
            </form>
        </div>
    </main>

    <!-- 底栏 -->
    <footer class="text-center">
        <div class="row dkhs w mx-auto">
            <div class="col-3"><span class="item1"></span> 品类齐全，轻松购物</div>
            <div class="col-3"><span class="item2"></span> 多仓直发，极速配送</div>
            <div class="col-3"><span class="item3"></span> 正品行货，精致服务</div>
            <div class="col-3"><span class="item4"></span> 天天低价，畅选无忧</div>
        </div>
        <hr>
        <p>Copyright © 2022 深圳技师学院枫叶小组（Maple Leaf Group） 版权所有</p>
        <p>项目研发小组所在地址：深圳市龙岗区龙城街道将军帽路深圳技师学院</p>
    </footer>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../plugin/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="../plugin/element-ui/lib/index.js"></script>
    <!-- 引入axios -->
    <script src="../plugin/axios.min.js"></script>
    <script src="../js/img_upload.js"></script>
    <script>
        new Vue({
            el: '#food-add-app',
            data() {
                return {
                    image: '',
                    user: {
                        name: "",
                        phone: "",
                        sex: "",
                        newPwd: "",//新密码
                        oldPwd: ""
                    }
                }
            },
            mounted() {
                //当页面加载完成后，发送异步请求，获取数据
                this.aboutMe();
            },
            methods: {
                // 查询分页数据
                async aboutMe() {
                    var _this = this;
                    //调用接口
                    axios({
                        method: "get",
                        url: "http://localhost:8080/user/aboutMe",
                    }).then(resp => {
                        console.log(resp);
                        //返回个人信息
                        _this.user.name = resp.data.data.name;
                        _this.user.phone = resp.data.data.phone;
                        _this.user.oldPwd = resp.data.data.password;
                        _this.user.sex = resp.data.data.sex;
                        if (resp.data.data.sex === "0") {
                            //女
                            $("#lady").prop("checked", "true");
                        } else if (resp.data.data.sex === "1") {
                            $("#man").prop("checked", "true");
                        }
                        _this.image = "http://localhost:8080/MapleLeafStore/upload/" + resp.data.data.avatar;
                    })
                },
                handleAvatarSuccess(response, file, fileList) {
                    this.image = `/common/download?name=${response.data}`
                    this.user.avatar = response.data;
                },
                beforeUpload(file) {
                    if (file) {
                        const suffix = file.name.split('.')[1]
                        const size = file.size / 1024 / 1024 < 2
                        if (['png', 'jpeg', 'jpg'].indexOf(suffix) < 0) {
                            this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
                            this.$refs.upload.clearFiles()
                            return false
                        }
                        if (!size) {
                            this.$message.error('上传文件大小不能超过 2MB!')
                            return false
                        }
                        return file
                    }
                },
                async edit(e) {
                    e.preventDefault();
                    var _this = this;
                    axios({
                        method: "put",
                        url: "http://localhost:8080/user/edit",
                        data: {
                            user: {
                                name: _this.user.name,
                                phone: _this.user.phone,
                                avatar: _this.user.avatar,
                                sex: _this.user.sex,
                                password: _this.user.newPwd,

                            },
                            oldPwd: _this.user.oldPwd//旧密码
                        }
                    }).then(resp => {
                        if (resp.data.code === "1") {
                            alert("修改成功");
                        } else {
                            alert(resp.data.msg);
                        }
                    })
                }
            },

        })
    </script>
</body>

</html>